<template>
	<div class="uiue-card">
		<div class="tit">附件</div>
		<a-form ref="formRef" :model="formData" layout="vertical" :rules="formRules" class="form-box" hideRequiredMark>

			<a-row :gutter="12" v-if="type === 'PC'">
				<a-col :span="6">
					<a-form-item name="intelPassPhoto">
						<template v-slot:label>
							<div class="labelCla">网络打通截图</div>
						</template>
						<a-upload v-model:file-list="fileList1" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUploadjg" :accept="fileImgType" :customRequest="customRequest"
							@change="intelPassPhotoChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="appDesignPage">
						<template v-slot:label>
							<div class="labelCla">PC设计页面</div>
						</template>
						<a-upload v-model:file-list="fileList2" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUpload" :accept="fileImgType" :customRequest="customRequest"
							@change="appDesignPageChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K且数量不超过3张</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="pcTestDoc">
						<template v-slot:label>
							<div class="labelCla">PC测试环境测试报告</div>
							<!-- <a-button class="upload-tem" type="link" :loading="loading"
								@click.prevent="uploadTem('项目计划书')">下载模板</a-button> -->
						</template>

						<a-upload v-model:file-list="fileList3" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequest" @change="pcTestDocChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6" v-if="currentName === '应用上线' || currentName === '生产环境灰度测试/材料提交' || formType">
					<a-form-item name="pcProdTestDoc">
						<template v-slot:label>
							<div class="labelCla">PC生产环境测试报告</div>
						</template>

						<a-upload v-model:file-list="fileList9" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequest" @change="pcProdTestDocChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>



			<a-row :gutter="12" v-if="type === 'APP'">
				<a-col :span="6">
					<a-form-item name="intelPassPhoto">
						<template v-slot:label>
							<div class="labelCla">网络打通截图</div>
						</template>
						<a-upload v-model:file-list="fileList4" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUploadjg" :accept="fileImgType" :customRequest="customRequest"
							@change="intelPassPhotoChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item name="appInterfacePhoto">
						<template v-slot:label>
							<div class="labelCla">应用使用界面</div>
						</template>
						<a-upload v-model:file-list="fileList5" list-type="picture" class="upload-list-inline"
							:before-upload="beforeUpload" :accept="fileImgType" :customRequest="customRequest"
							@change="appInterfacePhotoChange" @remove="remove">
							<div class="uploadBtn">
								<plus-outlined />
								<div class="ant-upload-text">上传图片</div>
							</div>
							<div class="font">支持扩展名：{{ fileImgType }}</div>
							<div class="font">图片大小不超过300K且数量不超过3张</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6"
					v-if="currentName === '测试环境验证' || currentName === '申请人提交生产材料' || currentName === '生产环境材料提交' || currentName === '生产环境灰度测试/材料提交' || formType">
					<a-form-item name="ltbgTestUpdateDoc">
						<template v-slot:label>
							<div class="labelCla">联通办公测试环境验证报告</div>
							<!-- <a-button class="upload-tem" type="link" :loading="loading"
								@click.prevent="uploadTem('项目计划书')">下载模板</a-button> -->
						</template>

						<a-upload v-model:file-list="fileList6" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequest" @change="ltbgTestUpdateDocChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6" v-if="currentName === '生产环境材料提交' || currentName === '生产环境灰度测试/材料提交' || formType">
					<a-form-item name="anSaoDoc">
						<template v-slot:label>
							<div class="labelCla">安扫报告</div>
						</template>

						<a-upload v-model:file-list="fileList7" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequest" @change="anSaoDocChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
						</a-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6" v-if="currentName === '生产环境材料提交' || currentName === '生产环境灰度测试/材料提交' || formType">
					<a-form-item name="ltbgProdUpdateDoc">
						<template v-slot:label>
							<div class="labelCla">联通办公生产环境验证报告</div>
						</template>
						<a-upload v-model:file-list="fileList8" :accept="fileType" :before-upload="beforeUploadFile"
							:customRequest="customRequest" @change="ltbgProdUpdateDocChange" @remove="remove">
							<a-button>
								<upload-outlined></upload-outlined>
								上传文件
							</a-button>
							<div class="font">支持扩展名：{{ fileType }}</div>
							<div class="font">支持文件大小30M</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>

			<!-- <div class="tit1">需上传的附件为：</div>
			<div class="tit2">
				1.项目计划书：《项目计划书--XXX应用》，《项目需求说明书--XXX应用》2.测试结果：《安全扫描报告--XXX应用》3.网络结果：应用服务器与移动端服务器访问成功截图，应用服务器与门户端服务器访问成功截图4.应用截图：应用移动端使用界面3张截图；
			</div>
			<div class="tit2">
				{{ str }}
			</div> -->
		</a-form>
	</div>
</template>

<script setup name="AnnexFormNew">
import fileApi from '@/api/dev/fileApi'
import tool from '@/utils/tool'
import other from '@/utils/other'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import store from "@/store";
import { useRoute } from 'vue-router'
import sysConfig from '@/config/index'
const route = useRoute()
const { formType, stepId } = route.query
const fileType = '.doc,.docx,.xlsx,.xls,.pdf,.zip,.rar,.ppt,.pptx'
const fileType111 = '.doc,.docx,.xlsx,.xls,.pdf,.zip,.rar'
const fileImgType = '.jpg,.png,.jpeg'
const fileUrl = import.meta.env.VITE_FILE_URL
const currentName = inject('currentName')
const props = defineProps({
	importOk: Boolean,
	isup: Boolean,
	type: String
})


const formRef = ref()
const loading = computed(() => store.state.approval.loading)

// 退回的工单
const isBack = computed(() => {
	return stepId === 'a001' || currentName?.value === '测试环境验证' || currentName?.value === '申请人提交生产材料' || currentName?.value === '生产环境材料提交' || currentName?.value === '生产环境灰度测试/材料提交' || (currentName?.value === '应用上线' && props.type === 'PC')
})
// 表单数据
const formData = props.type === 'PC' ? reactive({
	appDesignPage: [], // pc设计页面
	intelPassPhoto: [], // 网络打通截图
	pcTestDoc: [], // pc测试报告
	pcProdTestDoc: []
}) : reactive({
	appInterfacePhoto: [], // 应用使用界面截图
	intelPassPhoto: [], // 网络打通截图
	anSaoDoc: [], // 安扫报告
	ltbgProdUpdateDoc: [], //联通办公生产环境变更验证报告
	ltbgTestUpdateDoc: []  //联通办公测试环境变更验证报告
})
// 默认要校验的
const formRules = computed(() => {
	if (props.type === 'PC') {
		return {
			// development  production
			appDesignPage: [{ required: false, message: '请上传pc设计页面', trigger: 'blur' }],
			intelPassPhoto: [{ required: false, message: '请上传网络打通截图', trigger: 'blur' }],
			pcTestDoc: [{ required: false, message: '请上传报告', trigger: 'blur' }],
			pcProdTestDoc: [{ required: false, message: '请上传报告', trigger: 'blur' }],
		}
	} else {
		return {
			appInterfacePhoto: [{ required: false, message: '请上传应用使用界面截图', trigger: 'blur' }],
			intelPassPhoto: [{ required: false, message: '请上传网络打通截图', trigger: 'blur' }],
			anSaoDoc: [{ required: false, message: '请上传安扫报告', trigger: 'blur' }],
			ltbgProdUpdateDoc: [{ required: false, message: '请上传联通办公生产环境验证报告', trigger: 'blur' }],
			ltbgTestUpdateDoc: [{ required: false, message: '请上传联通办公测试环境验证报告', trigger: 'blur' }],
		}
	}
})
const fileList1 = ref([])
const fileList2 = ref([])
const fileList3 = ref([])
const fileList9 = ref([])



const fileList4 = ref([])
const fileList5 = ref([])
const fileList6 = ref([])
const fileList7 = ref([])
const fileList8 = ref([])




/*变更编辑  开始*/
const editDate = inject('editDate')
const fileHandle = (fileList) => {
	const file = fileList ? JSON.parse(fileList) : []
	file.map((item) => {
		if (item.url) {
			item.url = item.url.includes('http') ? item.url : `${fileUrl}/${item.url}`
		} else {
			// old
			item = `${fileUrl}/${item}`
		}
		return item
	})
	return file
}
if (editDate.value) {
	const { appInfoAppPropertiesAddParam, appInfoPcPropertiesAddParam, appPropertiesList, pcPropertiesList } = editDate.value
	const appObj = isBack.value ? appPropertiesList[0] : appInfoAppPropertiesAddParam
	const pcObj = isBack.value ? pcPropertiesList[0] : appInfoPcPropertiesAddParam
	if (props.type === 'PC') {
		if (pcObj?.intelPassPhoto) fileList1.value = fileHandle(pcObj.intelPassPhoto)
		if (pcObj?.appDesignPage) fileList2.value = fileHandle(pcObj.appDesignPage)
		if (pcObj?.pcTestDoc) fileList3.value = fileHandle(pcObj.pcTestDoc)
		if (pcObj?.pcProdTestDoc) fileList9.value = fileHandle(pcObj.pcProdTestDoc)
	}
	if (props.type === 'APP') {
		if (appObj?.intelPassPhoto) fileList4.value = fileHandle(appObj.intelPassPhoto)
		if (appObj?.appInterfacePhoto) fileList5.value = fileHandle(appObj.appInterfacePhoto)
		if (appObj?.ltbgTestUpdateDoc) fileList6.value = fileHandle(appObj.ltbgTestUpdateDoc)
		if (appObj?.anSaoDoc) fileList7.value = fileHandle(appObj.anSaoDoc)
		if (appObj?.ltbgProdUpdateDoc) fileList8.value = fileHandle(appObj.ltbgProdUpdateDoc)
	}

	Object.keys(formData).forEach((key) => {
		if (props.type === 'PC') {
			if (pcObj[key]) {
				formData[key] = JSON.parse(pcObj[key])
			}

		}
		if (props.type === 'APP') {
			if (appObj[key]) {
				formData[key] = JSON.parse(appObj[key])
			}

		}

	})
}

// 导入成功
// watch(() => props.importOk, (newData) => {
// 	if (newData) {
// 		let datas = store.state.appinfo.importData
// 		if (datas.planeFile) fileList1.value = fileHandle(datas.planeFile)
// 		if (datas.testResFile) fileList2.value = fileHandle(datas.testResFile)
// 		if (datas.networkConnFile) fileList3.value = fileHandle(datas.networkConnFile)
// 		// 存量里面脏数据 无法判断
// 		if (datas.appStoreImgFile) fileList4.value = fileHandle(datas.appStoreImgFile)
// 		if (datas?.productionEnvironmentReport) fileList5.value = fileHandle(datas.productionEnvironmentReport)
// 		if (datas?.securityScanReport) fileList6.value = fileHandle(datas.securityScanReport)
// 		if (datas?.otherScreenshots) fileList7.value = fileHandle(datas.otherScreenshots)
// 		Object.keys(formData).forEach((key) => {
// 			formData[key] = datas[key] ? JSON.parse(datas[key]) : []
// 		})
// 	}
// })

/*pc设计页面*/
const beforeUpload = (file) => {
	const isLt = file.size / 1024 < 300
	if (fileList2.value.length >= 3) {
		return false
	}
	if (!isLt) {
		return false
	}
	return true
}
const beforeUploadjg = (file) => {
	const isLt = file.size / 1024 < 300
	return isLt
}


// pc
const intelPassPhotoChange = (info) => {
	handleChange(info, 'intelPassPhoto')
}
const appDesignPageChange = (info) => {
	handleChange(info, 'appDesignPage')
}
const pcTestDocChange = (info) => {
	handleChange(info, 'pcTestDoc')
}
const pcProdTestDocChange = (info) => {
	handleChange(info, 'pcProdTestDoc')
}


//app
const appInterfacePhotoChange = (info) => {
	handleChange(info, 'appInterfacePhoto')
}
const ltbgTestUpdateDocChange = (info) => {
	handleChange(info, 'ltbgTestUpdateDoc')
}
const anSaoDocChange = (info) => {
	handleChange(info, 'anSaoDoc')
}
const ltbgProdUpdateDocChange = (info) => {
	handleChange(info, 'ltbgProdUpdateDoc')
}







const handleChange = (info, key) => {
	const { response, name, status, url, size } = info.file
	const isLt = size / 1024 < 300
	let resFileList = [...info.fileList];
	// pc
	if (key === 'intelPassPhoto' && !isLt && status !== 'removed') {
		message.warning('图片大小不超过300K')
		if (props.type === 'PC') {
			fileList1.value = resFileList.slice(0, resFileList.length - 1);
		} else {
			fileList4.value = resFileList.slice(0, resFileList.length - 1);
		}
		return false
	}
	if (key === 'appDesignPage' && resFileList.length > 3 && status !== 'removed') {
		message.warning('不能超过三张')
		fileList2.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}
	if (key === 'appDesignPage' && !isLt && status !== 'removed') {
		message.warning('图片大小不超过300K')
		fileList2.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}



	if (key === 'appInterfacePhoto' && resFileList.length > 3 && status !== 'removed') {
		message.warning('不能超过三张')
		fileList5.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}
	if (key === 'appInterfacePhoto' && !isLt && status !== 'removed') {
		message.warning('图片大小不超过300K')
		fileList5.value = resFileList.slice(0, resFileList.length - 1);
		return false
	}


	// 添加
	if (status === 'done') {
		if (response) {
			formData[key].push({
				name,
				url: response
			})
		}
	}

	// 删除
	if (status === 'removed') {
		let index
		if (response) {
			// 删除刚上传的
			index = formData[key].findIndex((item) => response === item.url)
		} else {
			// 删除后台返回的已经上传的
			index = formData[key].findIndex((item) => url.includes(item.url))
		}
		if (index > -1) {
			formData[key].splice(index, 1)
		}
	}
}

const remove = (file) => {
	// 只有移动端上线并且是老数据的时候才拦截
	if (props.isup && file.url && file.url.includes('http')) {
		message.warning('不能删除原始附件')
		return false
	}
}
const beforeUploadFile = (file) => {
	const isLt = file.size / 1024 < 30 * 1024
	if (!isLt) {
		message.error('文件大小不超过30M')
	}
	return isLt
}


// 自定义上传
const customRequest = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.fileUploadAliyunReturnUrlSym(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}
// 应用商店自定义上传（不带权限）
const customRequestStroe = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi.uploadCosReturnUrlPub(form).then((res) => {
		file.onSuccess(res, file.file)
		file.status = 'done'
	})
}
const fitFile = (arr) => {
	let str = ''
	if (arr != null && arr.length > 0) {
		str = JSON.stringify(arr)
	}
	return str
}
// 接入的时候可以不传
const retForm = () => {
	let form = cloneDeep(formData);
	Object.keys(form).forEach(v => {
		form[v] = fitFile(form[v])
	})
	return form
}
// 表单验证
const handleValidate = () => {
	return new Promise((resolve, reject) => {
		formRef.value
			.validate()
			.then(() => {
				console.log('成功')
				let form = cloneDeep(formData);
				Object.keys(form).forEach(v => {
					form[v] = fitFile(form[v])
				})
				resolve(form)
			})
			.catch(() => {
				console.log('失败')
				resolve(false)
			})
	})
}
const uploadTem = (name) => {
	other.downloadFile(name)
}

defineExpose({
	handleValidate,
	retForm
})
</script>

<style lang="less" scoped>
.tit {
	color: rgb(40, 40, 40);
	font-family: PingFang SC;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
}

.form-box {
	margin-top: 14px;
	padding: 0 18px;

	&-inp {
		border-radius: 4px;
		border: 1px solid rgb(206, 206, 206);
	}

	.labelCla {
		color: rgb(40, 40, 40);
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 28px;
		letter-spacing: 0px;
		text-align: left;
	}

	.upload-tem {
		color: #326eff;
		margin-left: 8px;
	}

	.font {
		color: rgb(150, 150, 150);
		font-size: 12px;
		line-height: 20px;
		margin-top: 6px;
	}

	.uploadBtn {
		width: 104px;
		height: 104px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fafafa;
		border: 1px dashed #d9d9d9;
		border-radius: 2px;
		cursor: pointer;
		transition: border-color 0.3s ease;
	}

	.tit1 {
		color: rgb(89, 89, 89);
		font-size: 12px;
	}

	.tit2 {
		color: rgb(150, 150, 150);
		font-size: 12px;
	}
}


.uploadBtn:hover {
	border-color: var(--primary-color);
}
</style>
<style>
.ant-upload-select-picture-card i {
	font-size: 32px;
	color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
	margin-top: 8px;
	color: #666;
}
</style>
<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
	float: left;
	width: 182px;
	margin-right: 8px;
}

.upload-list-inline :deep(.ant-upload-animate-enter) {
	animation-name: uploadAnimateInlineIn;
}

.upload-list-inline :deep(.ant-upload-animate-leave) {
	animation-name: uploadAnimateInlineOut;
}
</style>
